import { Router, Route, Switch, Redirect } from 'react-router-dom'
import react from 'react'
import Test from './pages/test'
import history from './utils/history'

import Auth from './component/auth'
// import Search from './pages/search'

// 实现懒加载
const Login = react.lazy(() => import('./pages/Login'))
const Layout = react.lazy(() => import('./pages/Layout'))
const NotFound = react.lazy(() => import('./pages/NotFound'))
const ProfileEdit = react.lazy(() => import('./pages/Profile/Edit'))
const ProfileChat = react.lazy(() => import('./pages/Profile/Chat'))
const Search = react.lazy(() => import('./pages/search'))
export default function App() {
  return (
    <div>
      <react.Suspense fallback={<div>....加载中</div>}>
        <Router history={history}>
          <Switch>
            {/* 由于需要匹配到/，所以要开启exact 精确匹配 */}
            <Redirect exact path="/" to="/home" />
            {/* 没有tab栏 不需要鉴权 */}
            <Route path="/home" component={Layout}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/search" component={Search}></Route>
            {/* 需要鉴权的路由 */}
            <Auth path="/profile/edit" component={ProfileEdit}></Auth>
            <Auth path="/profile/chat" component={ProfileChat}></Auth>
            {/* 测试页面 */}
            <Route path="/test" component={Test}></Route>
            {/* 配置404页 */}
            <Route path="*" component={NotFound}></Route>
          </Switch>
        </Router>
      </react.Suspense>
    </div>
  )
}
